// Init F7 Vue Plugin
Vue.use(Framework7Vue)
// var host = 'http://localhost:81/'

var myApp = new Framework7({
    onAjaxStart: function (xhr) {
        myApp.showIndicator();
    },
    onAjaxComplete: function (xhr) {
        myApp.hideIndicator();
    }
});
// Export selectors engine
var $$ = Dom7;
var length =[];
var items=[];
var typeitems ={};
var active = 0;

$$.ajax({
    url:  'getlivecategory',
    method: 'get',
    async:false,
    dataType: 'json',
    data: {},
    success: function (data, status, xhr) {
        for (var i = 0; i < data.data.length; i++) {
            items.push({
                index: '#tab' + i,
                target:'tab'+i,
                lcname: data.data[i].lcname,
                clazz: 'tab-link show-tab' + i
            });
           typeitems['tab' + i] = {dateitems: [], page: 1};
        }
    }
})

Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
};
Vue.filter('titledatefilter', function (value) {
    // var date;
    var year, month, day;
    year = value.substring(0, 4);
    month = value.substring(4, 6);
    day = value.substring(6, 8);
    return month + '月' + day+ '日';
});
// Init App
new Vue({
    el: '#app',
    // Init Framework7 by passing parameters here
    framework7: {
        root: '#app',
    },
    data: {
        nocontent:'img/nocontent.jpg',
        items: items,
        isshow: 'ok',
        dateitems: [],
        typeitems: typeitems
    },
    updated:function () {
        now = new Date();
        var cnt = parseInt(now.format('yyyyMMdd'));
        var height=$$("#tab" + active).find('.tab'+cnt).offset().top||
                        $$("#tab" + active).find('.tab'+(cnt+1)).offset().top||
                            $$("#tab" + active).find('.tab'+(cnt+2)).offset().top||
                                $$("#tab" + active).find('.tab'+(cnt+3)).offset().top||
                                    $$("#tab" + active).find('.tab'+(cnt+4)).offset().top||
                                        $$("#tab" + active).find('.tab'+(cnt-1)).offset().top||
                                            $$("#tab" + active).find('.tab'+(cnt-2)).offset().top||
                                                $$("#tab" + active).find('.tab'+(cnt-3)).offset().top||
                                                    $$("#tab" + active).find('.tab'+(cnt-4)).offset().top||
                                                        $$("#tab" + active).find('.tab'+(cnt-5)).offset().top||
                                                            $$('.toolbar-inner').height();


        $$("#tab" + active).scrollTop(height  - $$('.toolbar-inner').height());
    },
    mounted: function () {
        // this.getTitles();
        var that = this;
        that.initEvent();
        myApp.showTab('#tab0');
    },
    methods: {
        replace:function(item){
            start = new Date(item.opentime);
            now = new Date();
            end = new Date(item.endtime);
            if(now > end ){
                return "<span style='color: gray'>已结束</span>";
            }else if( now< end  && now >start){
                return '<span>正在直播...</span>';
            }else{
                return "<span style='color: black'>"+start.format('hh:mm')+' 开始'+"</span>";
            }
        },
        replacelivecontent:function(item){
            start = new Date(item.opentime);
            now = new Date();
            end = new Date(item.endtime);
            if(now > end ){
                return "<span style='color: gray'>"+item.livecontent+"</span>";
            }else if( now< end  && now >start){
                return '<span>'+item.livecontent+'</span>';
            }else{
                return '<span>'+item.livecontent+'</span>';
            }
        },
        iconfilter:function(item){
            start = new Date(item.opentime);
            now = new Date();
            end = new Date(item.endtime);
            if(now > end ){
                return '';
            }else if( now< end  && now >start){
                return '<span style="color: red;font-size: large">Live</span>';
            }else{
                return '<i class="f7-icons" style="color: gray;font-size: medium">alarm</i>'
            }
        },
        getData: function () {
            var indexPage = this.page;
            var that = this;
            $$.ajax({
                url: 'getlivecontent',
                method: 'get',
                dataType: 'json',
                data: {
                    page: indexPage
                },
                success: function (data, status, xhr) {
                    that.page++;
                    for (var i = 0; i < data.data.length; i++) {
                        that.dateitems.push(data.data[i]);
                    }
                }
            })
        },
        getDataOfType: function (index) {
            var that = this;
            var type = that.items[index].lcname;
            var tab =that.typeitems['tab'+index];
            $$.ajax({
                url: 'getlivecontentbytype',
                method: 'get',
                dataType: 'json',
                data: {
                    page: tab.page,
                    type: type
                },
                success: function (data, status, xhr) {
                    tab.page++;
                    active = index;
                    for (var i = data.data.length-1; i >=0; i--) {
                        tab.dateitems.push(data.data[i]);
                    }

                }
            })
        },
        initEvent: function () {
            var that = this;
            var sum =0;
            for(var i=0;i < that.items.length; i++ ){
                sum += $$('.toolbar-inner').find('.show-tab'+i).width();
                length.push(sum);
                $$('#tab'+ i).once('show', function () {
                     var d = document.documentElement.clientWidth;
                     var i= parseInt(this.id.replace('tab',''));
                     var w = $$('.toolbar-inner').find('.show-tab'+i).width();
                    if($$('.toolbar-inner').find('.show-'+this.id).offset().left  < 0 || (($$('.toolbar-inner').find('.show-'+this.id).offset().left + w) > d)){
                        if(length[i]- d/2 <0){
                            $$('.toolbar-inner').scrollLeft(0)
                        }
                        $$('.toolbar-inner').scrollLeft(length[i] - w/2- d/2);
                    }
                    var flag = that.typeitems['tab'+this.id.replace('tab','')].page == 1;
                    if (flag) {
                        // that.getDataOfType(that.items[this.id.replace('tab','')].lcname, that.typeitems['tab'+this.id.replace('tab','')]);
                        that.getDataOfType(this.id.replace('tab',''));
                    }
                });
            }
        }
    }
});


